{{ define "admin/auth/login" }}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后台管理系统 - 登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link href="/static/plugins/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="/static/admin/css/admin.css" rel="stylesheet" type="text/css"/>
    <link href="/static/admin/css/login.css" rel="stylesheet" type="text/css"/>

    <link rel="icon" href="/public/favicon.ico">

    <script type="text/javascript">
        // 全局变量
        var APP = {
            HOST: "",
            ROOT : "",
            STATIC : "/static/",
            WEB_ROOT: "/",
            JS_ROOT: "/static/admin/js"
        };
    </script>
</head>

<body id="login-body" class="layui-layout-body">
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
    <div class="layadmin-user-login-main" id="login-main">
        <form class="layui-form login-form" action="/admin/auth/dologin" method="POST">
            <div class="layadmin-user-login-box layadmin-user-login-header">
                <h2>后台登录</h2>
            </div>
            <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="username"></label>
                    <input type="text" class="layui-input" id="username" name="username" lay-verify="required" placeholder="用户名">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
                    <input type="password" class="layui-input" id="password" name="password" lay-verify="required" placeholder="密码">
                </div>
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-xs7">
                            <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"></label>
                            <input type="text" class="layui-input captcha_code" name="captcha_code" placeholder="验证码">
                        </div>
                        <div class="layui-col-xs5">
                            <div style="margin-left: 10px;">
                                <img class="layadmin-user-login-codeimg get-vercode" src="" data-url="/admin/captcha?length=4&font_size=25&height=52&use_noise=1&use_curve=0" alt="captcha" style="width: 122px;height: 44px;" />
                                <input type="hidden" class="captcha_key" name="captcha_key">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" style="margin-bottom: 20px;">
                    <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                    <!--<a href="javascript:;" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a>-->
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登 录</button>
                </div>

                <!--<div class="layui-trans layui-form-item layadmin-user-login-other">

                </div>-->
            </div>
        </form>
    </div>

    <div class="layui-trans layadmin-user-login-footer">

    </div>
</div>

<script src="/static/plugins/layui/layui.js"></script>
<script src="/static/admin/pages/login/particles.js"></script>

<script type="text/javascript">
    layui.use(['form', 'layer', 'jquery'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer;
        $ = layui.jquery;


        // 粒子线条背景
        $(document).ready(function () {
            // 默认样式
            //particlesJS.load('LAY-user-login', APP.STATIC + 'admin/pages/login/particles.json', function() {});
            // 自定义端点、线等属性
            particlesJS('LAY-user-login',
                {
                    "particles": {
                        "number": {
                            //下面这个数约大越密集 太大浏览器会卡
                            "value": 20,
                            "density": {
                                "enable": true,
                                //下面这个数约大越稀疏 太小浏览器会卡
                                "value_area": 80
                            }
                        },
                        //交点的颜色
                        "color": {
                            "value": "#ffffff"
                        },
                        //别动就对了-——
                        "shape": {
                            "type": "circle",
                            "stroke": {
                                "width": 0,
                                "color": "#ffffff"
                            },
                            "polygon": {
                                "nb_sides": 5
                            },
                            "image": {
                                "src": "img/github.svg",
                                "width": 100,
                                "height": 100
                            }
                        },
                        //透明度
                        "opacity": {
                            "value": 0.5,
                            "random": false,
                            "anim": {
                                "enable": false,
                                "speed": 1,
                                "opacity_min": 0.1,
                                "sync": false
                            }
                        },
                        //端点尺寸
                        "size": {
                            "value": 2,
                            "random": true,
                            "anim": {
                                "enable": false,
                                "speed": 40,
                                "size_min": 0.1,
                                "sync": false
                            }
                        },
                        //线
                        "line_linked": {
                            "enable": true,
                            "distance": 80,
                            //距离内连线
                            "color": "#ffffff",
                            "opacity": 0.4,
                            "width": 1
                        },
                        //移动属性
                        "move": {
                            "enable": true,
                            //动画速度在这里！！
                            "speed": 3,
                            "direction": "none",
                            "random": false,
                            "straight": false,
                            "out_mode": "out",
                            "attract": {
                                "enable": false,
                                "rotateX": 600,
                                "rotateY": 1200
                            }
                        }
                    },
                    //交互
                    "interactivity": {
                        "detect_on": "canvas",
                        "events": {
                            //鼠标滑过 和 鼠标点击 属性模式 //true表示开启 false 关闭
                            "onhover": {
                                "enable": true,
                                "mode": "grab"
                            },
                            "onclick": {
                                "enable": true,
                                "mode": "push"
                            },
                            "resize": true
                        },
                        //各种模式属性 把属性名替换 两个状态的 "mode": 即可1653/1657附近 "grab" "bubble" "repulse" "push" "remove"
                        //下面是鼠标事件名称
                        "modes": {
                            //鼠标与distance范围内点连线
                            "grab": {
                                "distance": 100,
                                "line_linked": {
                                    "opacity": 1
                                }
                            },
                            //改变周围点相应属性
                            "bubble": {
                                "distance": 100,
                                "size": 10,
                                "duration": 2,
                                "opacity": 8,
                                "speed": 3
                            },
                            //鼠标周围distance范围排斥
                            "repulse": {
                                "distance": 100
                            },
                            //添加 或 删除点de数量
                            "push": {
                                "particles_nb": 4
                            },
                            "remove": {
                                "particles_nb": 2
                            }
                        }
                    },
                    "retina_detect": true,
                }
            );
        });

        // 登录按钮
        form.on('submit(login)', function (data) {
            var _this = $(this);
            $(this).text('登录中...').attr('disabled', true).addClass('layui-disabled');

            var login_url = _this.parents('form').attr('action');
            $.ajax({
                url: login_url,
                type: 'post',
                dataType: 'json',
                //contentType: 'application/json; charset=utf-8',
                //data: JSON.stringify(data.field),
                data: data.field,
            }).done(function (res) {
                layer.msg(res.msg);
                _this.text('登 录').attr('disabled', false).removeClass('layui-disabled');
                if (res.status == 1) {
                    //window.location.href = res.url;
                    //window.parent.location.href = res.url;
                    parent.location.reload(); // 父页面刷新
                } else {
                    get_verify($('.get-vercode'));
                }
            });
            return false;
        });

        // 表单输入效果
        $('.loginBody .input-item').on('click', function (e) {
            e.stopPropagation();
            $(this).addClass('layui-input-focus').find('.layui-input').focus();
        });
        $('.loginBody .layui-form-item .layui-input').on('focus', function () {
            $(this).parent().addClass('layui-input-focus');
        });
        $('.loginBody .layui-form-item .layui-input').on('blur', function () {
            $(this).parent().removeClass('layui-input-focus');
            if ($(this).val() != '') {
                $(this).parent().addClass('layui-input-active');
            } else {
                $(this).parent().removeClass('layui-input-active');
            }
        });


        get_verify($('.get-vercode'));

        $('.get-vercode').on('click', function () {
            get_verify($(this));
        });
        // 获取/更换 验证码
        function get_verify(obj) {
            var url = $(obj).attr('data-url');
            $.get(url, function (res) {
                if (res.status == 1) {
                    $(obj).attr('src', res.data.src);
                    $('.captcha_key').val(res.data.key);
                }
            });
        }
    });
</script>
</body>
</html>
{{ end }}
